<template>
	<div class="lyrics-disc">
		<div class="disc">
			<div class="arm" :class="{ 'rotate-40': !isPlay }">
				<svg viewBox="0 0 142 194" fill="none" preserveAspectRatio="none" _nk="USm331">
					<path
						d="M22.295 22.182c9.522 37.887 30.055 91.037 40.778 104.785 6.524 8.365 44.621 36.724 44.621 36.724"
						stroke="#fff"
						stroke-width="8.767"></path>
					<g filter="url(#handle_svg__filter0_d_7846_24649)">
						<ellipse
							cx="19.949"
							cy="19.838"
							rx="19.949"
							ry="19.838"
							transform="rotate(-.996 156.124 -113.88) skewX(.011)"
							fill="#000"
							fill-opacity="0.1"></ellipse>
					</g>
					<path
						fill-rule="evenodd"
						clip-rule="evenodd"
						d="M94.475 153.733a1.223 1.223 0 011.72-.18l10.048 8.029a1.22 1.22 0 01.181 1.718 1.225 1.225 0 01-1.72.181l-10.048-8.029a1.222 1.222 0 01-.181-1.719z"
						fill="#000"
						fill-opacity="0.7"></path>
					<rect
						width="33.685"
						height="13.133"
						rx="3.294"
						transform="matrix(.77882 .6274 -.63123 .77547 104.425 152.893)"
						fill="#fff"></rect>
					<mask
						id="handle_svg__a"
						maskUnits="userSpaceOnUse"
						x="97"
						y="154"
						width="33"
						height="29"
						style="mask-type: luminance">
						<rect
							width="33.685"
							height="13.133"
							rx="3.294"
							transform="matrix(.77882 .6274 -.63123 .77547 104.425 152.893)"
							fill="#fff"></rect>
					</mask>
					<g mask="url(#handle_svg__a)">
						<path
							opacity="0.098"
							transform="matrix(.77893 .62726 -.63138 .77535 120.222 154.358)"
							fill="url(#handle_svg__paint0_linear_7846_24649)"
							d="M0 0h23.005v32.011H0z"></path>
						<path
							opacity="0.098"
							transform="matrix(.77893 .62726 -.63138 .77535 120.222 154.358)"
							fill="url(#handle_svg__paint1_linear_7846_24649)"
							d="M0 0h23.005v32.011H0z"></path>
					</g>
					<path
						fill-rule="evenodd"
						clip-rule="evenodd"
						d="M117.919 180.099l7.74-9.504a3.702 3.702 0 015.188-.543l9.557 7.697a3.655 3.655 0 01.546 5.16l-7.739 9.504a3.703 3.703 0 01-5.189.542l-9.557-7.696a3.655 3.655 0 01-.546-5.16z"
						fill="#fff"></path>
					<path
						opacity="0.3"
						fill-rule="evenodd"
						clip-rule="evenodd"
						d="M138.189 181.142l-9.992-7.617a.851.851 0 00-1.176.121.8.8 0 00.123 1.145l9.992 7.617a.853.853 0 001.176-.121.799.799 0 00-.123-1.145zm-15.633-.557a.85.85 0 00-1.175.121.8.8 0 00.123 1.145l9.992 7.617a.85.85 0 001.175-.121.8.8 0 00-.123-1.145l-9.992-7.617z"
						fill="#000"></path>
					<g filter="url(#handle_svg__filter1_d_7846_24649)">
						<ellipse
							cx="14.962"
							cy="14.879"
							rx="14.962"
							ry="14.879"
							transform="rotate(-.996 439.37 -403.732) skewX(.011)"
							fill="#fff"></ellipse>
					</g>
					<ellipse
						cx="4.987"
						cy="4.96"
						rx="4.987"
						ry="4.96"
						transform="rotate(-.996 1005.895 -983.493) skewX(.011)"
						fill="url(#handle_svg__paint2_linear_7846_24649)"></ellipse>
					<defs>
						<linearGradient
							id="handle_svg__paint0_linear_7846_24649"
							x1="0"
							y1="48.017"
							x2="23.005"
							y2="48.017"
							gradientUnits="userSpaceOnUse">
							<stop stop-opacity="0.01"></stop>
							<stop offset="1"></stop>
						</linearGradient>
						<linearGradient
							id="handle_svg__paint1_linear_7846_24649"
							x1="11.502"
							y1="40.014"
							x2="23.005"
							y2="40.014"
							gradientUnits="userSpaceOnUse">
							<stop stop-opacity="0.01"></stop>
							<stop offset="1"></stop>
						</linearGradient>
						<linearGradient
							id="handle_svg__paint2_linear_7846_24649"
							x1="0"
							y1="0"
							x2="0"
							y2="9.919"
							gradientUnits="userSpaceOnUse">
							<stop stop-color="#ECE7E7"></stop>
							<stop offset="0.471" stop-color="#D9D9D9"></stop>
							<stop offset="1" stop-color="#F0EBEB"></stop>
						</linearGradient>
						<filter
							id="handle_svg__filter0_d_7846_24649"
							x="0.598"
							y="0.596"
							width="43.393"
							height="43.172"
							filterUnits="userSpaceOnUse"
							color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
							<feColorMatrix
								in="SourceAlpha"
								values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
								result="hardAlpha"></feColorMatrix>
							<feOffset></feOffset>
							<feGaussianBlur stdDeviation="0.874"></feGaussianBlur>
							<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"></feColorMatrix>
							<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_7846_24649"></feBlend>
							<feBlend
								in="SourceGraphic"
								in2="effect1_dropShadow_7846_24649"
								result="shape"></feBlend>
						</filter>
						<filter
							id="handle_svg__filter1_d_7846_24649"
							x="5.585"
							y="5.555"
							width="33.419"
							height="33.253"
							filterUnits="userSpaceOnUse"
							color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
							<feColorMatrix
								in="SourceAlpha"
								values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
								result="hardAlpha"></feColorMatrix>
							<feOffset></feOffset>
							<feGaussianBlur stdDeviation="0.874"></feGaussianBlur>
							<feColorMatrix
								values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.178584 0"></feColorMatrix>
							<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_7846_24649"></feBlend>
							<feBlend
								in="SourceGraphic"
								in2="effect1_dropShadow_7846_24649"
								result="shape"></feBlend>
						</filter>
					</defs>
				</svg>
			</div>
			<div class="record">
				<img
					v-if="currentMusicID"
					:src="img"
					alt=""
					:style="{ animationPlayState: isPlay ? 'running' : 'paused' }" />
			</div>
		</div>
	</div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
	name: 'LyricsDisc',
	setup() {
		const store = useStore();
		return {
			img: computed(() => store.state.song.picUrl),
			isPlay: computed(() => store.state.song.isPlay),
			currentMusicID: computed(() => store.state.song.currentMusicID),
		};
	},
};
</script>

<style lang="less" scoped>
.lyrics-disc {
	display: flex;
	align-items: center;
	.disc {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 50%;
		.arm {
			position: absolute;
			top: -5.5rem;
			left: 43%;
			z-index: 1;
			width: 8rem;
			transform-origin: 1.2rem 1.2rem;
			transition: transform 0.5s linear;
		}
		.rotate-40 {
			transform: rotate(-35deg);
		}
		.record {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25rem;
			height: 25rem;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('../../../assets/images/vinyl-record.png');
			img {
				width: 66%;
				border-radius: 50%;
				animation: disc-rotation 20s linear 0s infinite;
			}
		}
	}
	@keyframes disc-rotation {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
}
</style>
